<!DOCTYPE html>
<html lang="en">

<head>
  <title>coloris</title>
  <link rel="stylesheet" type="text/css" href="./coloris.min.css" />
  <style type="text/css">
    body {
      height: 120vh;
      margin: 30px;
      color: #444;
      background-color: #fff;
      font-family: 'Lato', sans-serif;
    }

    h1 {
      margin-bottom: 1.5em;
    }

    input {
      width: 150px;
      height: 32px;
      padding: 0 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      box-sizing: border-box;
    }

    .examples {
      display: flex;
      flex-wrap: wrap;
    }

    .example {
      flex-shrink: 0;
      width: 300px;
      margin-bottom: 30px;
    }

    .square .clr-field button,
    .circle .clr-field button {
      width: 22px;
      height: 22px;
      left: 5px;
      right: auto;
      border-radius: 5px;
    }

    .square .clr-field input,
    .circle .clr-field input {
      padding-left: 36px;
    }

    .circle .clr-field button {
      border-radius: 50%;
    }

    .full .clr-field button {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <div class="examples">
    <div class="example">
      <p>默认颜色</p>
      <input type="text" value="green" data-coloris="" />
    </div>
    <div class="example square">
      <p>圆角</p>
      <input type="text" class="coloris" value="rgb(255, 0, 0)" />
    </div>
    <div class="example circle">
      <p>圆形</p>
      <input type="text" class="coloris" value="#cc458faa" />
    </div>
    <div class="example full">
      <p>充满</p>
      <input type="text" class="coloris" value="#ffcc00" />
    </div>

  </div>
  <script type="text/javascript" src="./coloris.min.js"></script>
  <script type="text/javascript">
    Coloris({
      el: '.coloris',
      swatches: [
        '#264653',
        '#2a9d8f',
        '#e9c46a',
        '#f4a261',
        '#e76f51',
        '#d62828',
        '#023e8a',
        '#0077b6',
        '#0096c7',
        '#00b4d8',
        '#48cae4',
      ]
    });
  </script>
</body>

</html>